<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		省份:<select name="" id="provinceid" onchange="provincechange()">
			<option value="-1">请选择省份</option>
		</select>
		城市:<select name="" id="cityid" onchange="citychange()">
			<option value="-1">请选择城市</option>
		</select>
		地区:<select name="" id="arerid" onchange="arerchange()">
			<option value="-1">请选择地区</option>
		</select>
		<br />
		你的选择是:<label id="selectvalue"></label>
	</body>
	<script type="text/javascript">
		var provinces = ['福建省','广州省','浙江省'];
		var citys = [
			['福州市','龙岩市'],
			['广州市','深圳市','东莞市'],
			['杭州市','温州市']
		];
		var arers = [
			[
				['福州1','福州2'],
				['新罗1','新罗2']
			],
			[
				['广州市1','广州市2'],
				['深圳市1','深圳市2','深圳市3'],
				['深圳市1','深圳市2']
			],
			[
				['杭州市1','杭州市2'],
				['温州市1','温州市2']
			]
		]
		function arerchange(){
			var provalue = document.getElementById('provinceid').value;
			console.log(provalue)
			var cityonevalue = document.getElementById('cityid').value;
			console.log(cityonevalue)
			var arerthreevalue = document.getElementById('arerid').value;
			console.log(arerthreevalue)
			
			// var arerid = document.getElementById('arerid');
			// arerid.innerHTML = `<option value="-1">请选择地区</option>`;
			// if(cityonevalue == -1){
			// 	return;
			// }
			
			var proone = provinces[provalue];
			console.log(proone)
			var citytwo = citys[provalue][cityonevalue];
			console.log(citytwo)
			var arerthree = arers[provalue][cityonevalue][arerthreevalue];
			console.log(arerthree)
			document.getElementById('selectvalue').innerHTML = proone+`-`+citytwo+`-`+arerthree;
		}
		function citychange(){
			var provalue = document.getElementById('provinceid').value;
			var cityonevalue = document.getElementById('cityid').value;
			var arerids = document.getElementById('arerid');
			arerids.innerHTML = `<option value="-1">请选择地区</option>`;
			if(cityonevalue == -1){
				return;
			}
			// arerids.innerHTML = `<option value="-1">请选择地区</option>`;
			// if(cityonevalue == -1){
			// 	return;
			// }
			for(var i=0;i<arers[provalue][cityonevalue].length;i++){
				arerids.innerHTML += `<option value="`+i+`">`+arers[provalue][cityonevalue][i]+`</option>`
			}
		}
		function provincechange(){
			var provalue = document.getElementById('provinceid').value;
			var cityid = document.getElementById('cityid');
			cityid.innerHTML = `<option value="-1">请选择城市</option>`;
			if(provalue == -1){
				return;
			}
			for(var i=0;i<citys[provalue].length;i++){
				cityid.innerHTML += `<option value="`+i+`">`+citys[provalue][i]+`</option>`
			}
		}
		onload = function(){
			var proid = document.getElementById('provinceid');
			for(var i=0;i<provinces.length;i++){
				proid.innerHTML += `<option value="`+i+`">`+provinces[i]+`</option>`;
			}
			
		}
	</script>
</html>
